<!DOCTYPE html>
<html>
    <head>
        <meta charset = "UTF-8">
        <title>cookie</title>
        <script>
            //屏幕对象
            //alert(screen.availWidth);//有效的宽度
            //alert(screen.availHeight);//有效的高度
            //alert(screen.width);//实际的宽度
            //alert(screen.height);//实际的高度
            //alert(screen.colorDepth);//颜色深度

            //历史对象
            /*var his = window.history;
            his.forward();//向后一页
            his.back();//向前一页
            his.go(0);//-2*/

            //资源管理器对象
            //var loc = window.location;
            //alert(loc.href);//当前地址
            //alert(loc.hostname);//主机名|域名
            //alert(loc.pathname);//地址路径
            //alert(loc.port);//端口
            //alert(loc.protocol);//协议

            //cookie的操作
            //它是一个文件,是存储在客户端机器的文件
            //用于存储信息
            //每个浏览器都支持读写cookie文件

            //按用户->域名
            //读取cookie
            //alert(document.cookie);
            //设置新的cookie
            //document.cookie = 'b=456';
            /*a=123; b=456
            alert(document.cookie);*/


            //数组对象的操作
            //length join push pop concat sort shift unshift reverse slice splice reverse
            //length -> 长度
            //push -> 往数组当中添加元素（最后的位置添加）, 返回数组的长度
            //pop -> 每次删除最后一个元素, 返回删除的元素
            //concat -> 数组的追加
            //shift -> 删除第一个元素, 返回删除的元素
            //unshift -> 往数组头部添加多个元素, 返回数组的长度
            //reverse -> 数组的顺序反转
            //slice -> 数组的截取 -> string substr方法 参数1 开始位置(包括) 参数2 结束位置(不包括)
            //splice -> 数组的添加和删除
            //          参数1:删除的开始位置
            //          参数2:删除的长度
            //          参数3:在删除的位置添加新的元素
            //          返回值:删除的元素
            //join -> 拼接字符串 拼接词


            //字面量的方式申明数组
            var list1 = [1,2,3,4,5];
            //var list1 = [1,2,6,7,4,5];
            //alert(list1.reverse());
            //alert(list1.pop());
            //alert(list1.push('str'));
            //list1[5] = 'str';
            //alert(list1.shift());
            //alert(list1.unshift(-1, 0));
            //var list3 = list1.slice(1, 4);
            //list1.splice(2, 1, [6,7]);
            //alert(list1.join('dxm'));

            var list2 = new Array();
            list2.push(11);
            list2.push(22);
            list2.push(33);
            list2.push(44);
            list2.push(55);

            //var list3 = list1.concat(list2);



            //去左空格;
            function ltrim(s){
                return s.replace(/(^\s*)/, "");
            }
            //去右空格;
            function rtrim(s){
                return s.replace(/(\s*$)/, "");
            }
            //去左右空格;
            function trim(s){
                //s.replace(/(^\s*)|(\s*$)/, "");
                return rtrim(ltrim(s));

            }

            //读取cookie
            var getCookie = function(key) {
                var cookie = document.cookie;
                var arr = cookie.split(';');
                for (var i = 0; i < arr.length; i++) {
                    var re = arr[i].split('=');
                    if (key == trim(re[0])) {
                        return re[1];
                    }
                }
            };

            //设置cookie
            var setCookie = function(key, value, time) {
                var _t = '';
                if (time) {
                    var d = new Date();
                    d.setSeconds(d.getSeconds() + time);
                    _t = ';expires=' + d.toGMTString();
                }
                document.cookie = key + '=' + value + _t;
            };

            //数组操作的各种方法
            jQuery(function($) {
//访问cookie,看是否有账号和密码
                console.info(document.cookie);

                //如果有账号和密码则提交表单
                var _name = getCookie('name');
                var _pass = getCookie('pass');
                if (_name && _pass) {
                    document.getElementById('txt_name').value = _name;
                    document.getElementById('txt_pass').value = _pass;
                    //document.getElementById('theForm').submit();
                }

                //提交按钮的事件
                document.getElementById('btnSub').onclick = function() {
                    //判断是否钩上 记住密码
                    if (document.getElementById('chkKeep').checked) {
                        setCookie('name', document.getElementById('txt_name').value, 10);
                        setCookie('pass', document.getElementById('txt_pass').value, 10);
                    }
                    document.getElementById('theForm').submit();
                };
            });
        </script>
    </head>

    <body>
        <form id = 'theForm' action = 'marquee.html' method = 'post'>
            用户名:<input id = 'txt_name' type = 'text' /><br/>
            密码:<input id = 'txt_pass' type = 'password' /><br/>
            <input id = 'chkKeep' type = 'checkbox' />记住账号密码<br/>
            <button id = 'btnSub' type = 'button'>提交</button>
        </form>
    </body>
</html>